<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools :show-before="true">
        <template v-slot:before>
          共{{ page.total }}条数据
        </template>
        <template v-slot:after>
          <el-button size="medium" type="success" @click="uploadFn">excel导入</el-button>
          <el-button size="medium" type="primary" @click="exportFn">普通excel导出</el-button>
          <el-button size="medium" type="warning" @click="addFn">新增员工</el-button>
        </template>
      </PageTools>
      <!-- 放置表格和分页 -->
      <el-card class="buttom">
        <el-table :data="tableList">
          <el-table-column align="center" label="序号" type="index" />
          <el-table-column align="center" label="姓名" prop="username" />
          <!-- 🧨使用插槽解决图片问题
                1. 图片链接转标签
                2. 解决图片报错
           -->
          <el-table-column align="center" label="头像" prop="staffPhoto">
            <template v-slot="{row}">
              <img
                v-imageerr="require('@/assets/common/bigUserHeader.png')"
                :src="row.staffPhoto"
                alt=""
                width="40px"
              >
            </template>
          </el-table-column>
          <el-table-column align="center" label="手机号" prop="mobile" />
          <el-table-column align="center" label="工号" prop="workNumber" />
          <!-- 使用formatter格式化自定义内容 -->
          <el-table-column align="center" label="聘用形式" prop="formOfEmployment" :formatter="formatEmployees" />
          <el-table-column align="center" label="部门" prop="departmentName" />
          <!-- 使用插槽格式化时间
            解决方法使用过滤器:
            formatDate: 格式化时间
           -->
          <el-table-column align="center" label="入职时间" prop="timeOfEntry">
            <template v-slot="{row}">
              <span>
                {{ row.timeOfEntry | formatDate }}
              </span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="状态" prop="enableState">
            <!-- 使用插槽自定义状态
                 组件: el-switch
                 属性:
                  active-color: 打开时候的颜色
                   inactive-color: 关闭时的颜色
                 1.使用value: 默认是一个Boolean 值,true:打开 false:关闭
                  :value="row.enableState===1"
                 2.使用v-model: 默认是一个Boolean 值
                   如果需要自定义改变则需要使用扩展的 value 类型
                          v-model="row.enableState"
                          active-value="100"
                          inactive-value="0"
             -->
            <template v-slot="{row}">
              <el-switch
                :value="row.enableState===1"
                active-color="#409eff"
                inactive-color="#666"
              />
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" fixed="right" width="280">
            <template v-slot="{row}">
              <el-button type="text" size="small" @click="toDetail(row.id)">查看</el-button>
              <el-button type="text" size="small">转正</el-button>
              <el-button type="text" size="small">调岗</el-button>
              <el-button type="text" size="small">离职</el-button>
              <el-button type="text" size="small" @click="assignRoleFn(row.id)">角色</el-button>
              <el-button type="text" size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height: 60px">
          <el-pagination
            layout="total,prev, pager, next"
            :total="page.total"
            :page-size="page.size"
            @current-change="currentChange"
          />
        </el-row>
      </el-card>

      <!-- 弹窗组件 -->
      <AddEmployee :show-dialog.sync="showDialog" @updateEvent="geTUserList" />
      <!-- 角色弹窗组件 -->
      <AssignRole ref="assignRole" :show-dialog.sync="roleShowDialog" />

    </div>
  </div>
</template>

<script>
import { geTUserList, delEmployee } from '@/api/employees'
import employees from '@/api/constant/employees'
import { export_json_to_excel } from '@/vendor/Export2Excel'
// 时间格式化
import { formatDate } from '@/filters/index'
// 子组件
import AddEmployee from './components/add-employee.vue'
import AssignRole from './components/assign-role.vue'
export default {
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      // 保存用户数据
      tableList: [],
      // 分页数据
      page: {
        page: 1,
        size: 10,
        total: 0
      },
      showDialog: false,
      roleShowDialog: false
    }
  },
  /* 渲染数据 */
  created() {
    // 1.调用接口获取员工数据渲染
    this.geTUserList()
  },
  methods: {
    /* 渲染列表数据 */
    async geTUserList() {
      // 1.调用接口获取数据
      const res = await geTUserList({
        page: this.page.page,
        size: this.page.size
      })
      console.log(res)
      // 2.渲染数据列表
      this.tableList = res.rows
      this.page.total = res.total
    },
    /* 解决分页-切换数据-渲染 */
    currentChange(val) {
      // 1.修改页码
      this.page.page = val
      // 2.重新渲染
      this.geTUserList()
    },
    /* 解决聘用自定义内容 */
    formatEmployees(row, column, cellValue, index) {
      /**
       * row: 当前行数据对象
       * column: 当前列相关对象(包含表头,字段名,等)
       * cellValue: 当前属性对应的值(一般对这个值进行处理)
       * index: 当前行索引
       * 首先自定义一个数组,将数值和对应的类型全部写到对象
       * 使用 枚举得到对应的对象
       * 返回对象里面的类型
       */
      const obj = employees.hireType.find(item => +item.id === +cellValue)
      // return obj && obj.value  || '未知'
      return obj ? obj.value : '未知'
    },
    /* 新增,点击事件 */
    addFn() {
      // 1.控制编辑框显示
      this.showDialog = true
    },
    /* 删除操作 */
    delFn(id) {
      this.$confirm('是否确认删除', '删除', { type: 'warning' })
        .then(async() => {
          // 1. 调用删除接口
          await delEmployee(id)
          // 判断是否只有一条数据 且 不是最后一页
          if (this.page.page !== 1 && this.tableList.length === 1) {
            this.page.page--
          }
          // 2. 重新渲染列表
          this.geTUserList()
        }).catch(() => {
          console.log('取消 删除 或 数据不存在')
        })
    },
    /* 导入操作 */
    uploadFn() {
      this.$router.push('/employees/import')
    },
    /* 导出操作 */
    async exportFn() {
      // 1.调用接口获取所有数据
      const res = await geTUserList({
        page: 1,
        size: this.page.total
      })
      console.table(res.rows)
      // 2 .将得到的数组对象转成二位数组
      const data = res.rows.map((item) => {
        return this.objToArr(item)
      })
      const header = ['手机号', '姓名', '入职日期', '转正日期', '工号', '招聘形式']
      // const data = [
      //   ['13', '13', '2018-11-22', '2018-11-22', '10010'],
      //   ['14', '13', '2018-11-22', '2018-11-22', '10010']
      // ]

      // 3 . 引入导出插件使用方法：export_json_to_excel
      // 参数 1 header 字段名 类型:array  格式: []
      //      2 data   表单   类型:array  格式: [[],[],[]]
      export_json_to_excel({
        header,
        data
      })
    },
    // 改造需要导出的数据 (导出辅助)
    objToArr(obj) {
      /* 一 :用数组
      // 准备好需要导出字段名数组
      const arr = ['mobile', 'username', 'timeOfEntry', 'correctionTime', 'workNumber']
      // arrList => 处理后的数组
      const arrList = []
      arr.forEach(item => {
        arrList.push(obj[item])
      })
      return arrList
      */
      // ## 二 : 用对象
      // arrList => 处理后的数组
      const arrList = []
      const user = {
        mobile: '手机号',
        username: '用户名',
        timeOfEntry: '入职日期',
        correctionTime: '转正日期',
        workNumber: '工号',
        formOfEmployment: '招聘形式'
      }
      for (const key in user) {
        // 🧨 优化导出时间 | 招聘形式
        if (key === 'timeOfEntry' || key === 'correctionTime') {
          // 使用时间格式化方法格式化所有时间
          arrList.push(formatDate(obj[key], 'yyyy/MM/dd'))
        } else if (key === 'formOfEmployment') {
          // 优化招聘形式 : objTool当前配置对象{id:xx,value:""}
          const objTool = employees.hireType.find(item => +item.id === +obj[key])
          arrList.push(objTool ? objTool.value : '未知')
        } else {
          arrList.push(obj[key])
        }
      }
      return arrList
    },
    /* 员工详情 */
    toDetail(id) {
      this.$router.push(`/employees/detail/${id}`)
    },
    /* 控制角色管理弹窗显示 */
    assignRoleFn(id) {
      // 1 .控制显示
      this.roleShowDialog = true
      // 2. 父传子 当前点击的id
      this.$refs.assignRole.curId = id
      // 3. 调用接口重新回显数据
      this.$refs.assignRole.getEmployeesById()
    }
  }
}
</script>

<style lang="scss" scoped>
.buttom{
  margin-top: 20px;
}

</style>
